import React from "react";
import { Head, Progre } from "./style";
import { progressed } from "../../api";
import { connect } from "react-redux";
// import { Toast } from "antd-mobile";
import G2 from "@antv/g2";

const kc = require("../../assets/img_kc.png");
class Index extends React.PureComponent {
  state = {
    info: ''
  };
  componentDidMount() {
    progressed({
      mid: this.props.userInfo.id,
      sid: this.props.match.params.id
    }).then(res => {
      this.setState({
        info: res.data.data
      })
      var data = [
        {
          type: "完成度",
          value: res.data.data.lerant_progresse
        }
      ];
      var chart = new G2.Chart({
        container: "c1",
        forceFit: true,
        height: 260,
        padding: "auto"
      });

      var data2 = [
        {
          type: "完成度",
          value: res.data.data.finsh_progresse
        }
      ];


      var chart2 = new G2.Chart({
        container: "c2",
        forceFit: true,
        height: 260,
        padding: "auto"
      });
  
      chart2.source(data2);
      chart2.legend(false);
      chart2.facet("rect", {
        fields: ["type"],
        padding: 20,
        showTitle: false,
        eachView: function eachView(view, facet) {
          var data = facet.data;
          var color = "#deb97b";
          data.push({
            type: "其他",
            value: 100 - data[0].value
          });
          view.source(data);
          view.coord("theta", {
            radius: 0.8,
            innerRadius: 0.9
          });
          view
            .intervalStack()
            .position("value")
            .color("type", [color, "#e6e6e6"])
            .opacity(1);
          view.guide().html({
            position: ["50%", "50%"],
            html:
              '<div class="g2-guide-html"><p class="title">' +
              data[0].type +
              '</p><p class="value">' +
              (data[0].value + "%") +
              "</p></div>"
          });
        }
      });
      chart2.render();
  
      chart.source(data);
      chart.legend(false);
      chart.facet("rect", {
        fields: ["type"],
        padding: 20,
        showTitle: false,
        eachView: function eachView(view, facet) {
          var data = facet.data;
          var color = "#deb97b";
          data.push({
            type: "其他",
            value: 100 - data[0].value
          });
          view.source(data);
          view.coord("theta", {
            radius: 0.8,
            innerRadius: 0.9
          });
          view
            .intervalStack()
            .position("value")
            .color("type", [color, "#e6e6e6"])
            .opacity(1);
          view.guide().html({
            position: ["50%", "50%"],
            html:
              '<div class="g2-guide-html"><p class="title">' +
              data[0].type +
              '</p><p class="value">' +
              (data[0].value + "%") +
              "</p></div>"
          });
        }
      });
      chart.render();

    })
    
  }
  render() {
    return (
      <div>
        <Head>
          <img width="30" src={kc} alt="" />
          <h4>已学习：{this.state.info.learnts}天</h4>
          <p>
            总时长数：{this.state.info.courses_time} <span>完成时长数：{this.state.info.learnts_time}</span>
          </p>
          <div className="progress">
            <span>总课时</span>
            <div className="bg">
              <i style={{ width: this.state.info.lerant_progresse }} />
            </div>
            <span>{this.state.info.learnts}</span>
          </div>
          <div className="compine">已完成：{this.state.info.learnts}</div>
        </Head>

        <Progre>
          <h3>视频学习完成度</h3>
          <div id="c1" />
        </Progre>
        <Progre>
          <h3>作业学习完成度</h3>
          <div id="c2" />
        </Progre>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  userInfo: state.userInfo
});
const mapDispatchToProps = dispatch => ({});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Index);
